<style>
    .upload-area{width:200px;height:200px;float:left;border: 1px solid #e7e7eb;background-color: #f4f5f9;}
    .preview-area{width:322px;display: inline-block;margin-left:72px}
    .tcrop{line-height: 60px;font-weight:600;color:#8d8d8d;}
    .crop60{width:80px;height:80px;margin-left:55px;display:inline-block;overflow: hidden;}
    .crop100{width:140px;height:140px;display:inline-block;overflow:hidden;}
    .crop{border: 1px solid #e7e7eb;}
    .sam{color:#8d8d8d;margin-bottom:12px;padding-left:53px;margin-top: 60px;}
    .optionBox{display:block;padding:0 53px 45px;}
</style>
<script>
    //预览图
    function showPreview(coords){
        var img_width = $('#cropbox').width();
        var img_height = $('#cropbox').height();
        //根据包裹的容器宽高,设置被除数
        var rx = 140 / coords.w;
        var ry = 140 / coords.h;
        $('#crop-preview-100').css({
            width: Math.round(rx * img_width) + 'px',
            height: Math.round(ry * img_height) + 'px',
            marginLeft: '-' + Math.round(rx * coords.x) + 'px',
            marginTop: '-' + Math.round(ry * coords.y) + 'px'
        });
        rx = 80 / coords.w;
        ry = 80 / coords.h;
        $('#crop-preview-60').css({
            width: Math.round(rx * img_width) + 'px',
            height: Math.round(ry * img_height) + 'px',
            marginLeft: '-' + Math.round(rx * coords.x) + 'px',
            marginTop: '-' + Math.round(ry * coords.y) + 'px'
        });
    }
    function uploaded(state,path){
        $("#img_url").attr("src",''+path);
        $("input[name='img_url']").val(path);
        $("#img_url").parent('a').attr('img_url',path);
        $('.imgList a').removeAttr('id');
        $("#img_url").parent('a').attr('id','Imgselected');

        //重置
        $('#preview-hidden').find('*').remove();
        $('#preview-hidden').hide().addClass('hidden').css({'padding-top':0,'padding-left':0});
        var preview = $('.upload-area').children('#preview-hidden');
        preview.show().removeClass('hidden');
        //两个预览窗口赋值
        $('.crop').children('img').attr('src',''+path+'?random='+Math.random());
        //隐藏表单赋值
        $('#img_src').val(''+path);
        //绑定需要裁剪的图片
        var img = $('<img />');
        preview.append(img);
        preview.children('img').attr('src',''+path+'?random='+Math.random());
        var crop_img = preview.children('img');
        crop_img.attr('id',"cropbox").show();
        var img = new Image();
        img.src = ''+path+'?random='+Math.random();
        //根据图片大小在画布里居中
        img.onload = function(){
            var img_height = 0;
            var img_width = 0;
            var real_height = img.height;
            var real_width = img.width;
            if(real_height > real_width && real_height > 200){
                var persent = real_height / 200;
                real_height = 200;
                real_width = real_width / persent;
            }else if(real_width > real_height && real_width > 200){
                var persent = real_width / 200;
                real_width = 200;
                real_height = real_height / persent;
            }
            if(real_height < 200){
                img_height = (200 - real_height)/2;
            }
            if(real_width < 200){
                img_width = (200 - real_width)/2;
            }
            preview.css({width:(200-img_width)+'px',height:(200-img_height)+'px'});
            preview.css({paddingTop:img_height+'px',paddingLeft:img_width+'px'});
        }
        //裁剪插件
        $('#cropbox').Jcrop({
            bgColor:'#333',   //选区背景色
            bgFade:true,      //选区背景渐显
            fadeTime:1000,    //背景渐显时间
            allowSelect:false, //是否可以选区，
            allowResize:true, //是否可以调整选区大小
            aspectRatio: 1,     //约束比例
            minSize : [200,200],//可选最小大小
            boxWidth : 200,		//画布宽度
            boxHeight : 200,	//画布高度
            onChange: showPreview,//改变时重置预览图
            onSelect: showPreview,//选择时重置预览图
            setSelect:[ 0, 0, 200, 200],//初始化时位置
            onSelect: function (c){	//选择时动态赋值，该值是最终传给程序的参数！
                $('#x').val(c.x);//需裁剪的左上角X轴坐标
                $('#y').val(c.y);//需裁剪的左上角Y轴坐标
                $('#w').val(c.w);//需裁剪的宽度
                $('#h').val(c.h);//需裁剪的高度
            }
        });
        var firstarr=path.split('?');
        var secondarr=firstarr[0].split('/');
        var picname=secondarr[secondarr.length-1];
        $("input[name='picName']").val(picname);
    }
</script>
<div class="sam">
    支持JPG,PNG,GIF,图片小于1MB,尺寸不小于100*100,真实高清头像更受欢迎！
</div>
<form method="post" target="_self" class="form-horizontal checkoutform" action="{:U('cropImg')}">
    <div class="optionBox">
        <div class="imgList">
            <input name="img_url" type="hidden" value="" />
            <input type="hidden" name="picName" value="">
            <div style="padding:8px;padding-left:0"><iframe width="100%" height="45" scrolling="no" marginheight="0" marginwidth="0" style=" padding:0; margin:0" frameborder="0" src="{:U('Member/upload')}"></iframe></div>
            <span id="status_" style="text-align:center; display:block"></span>
        </div>
        <div class="upload-area">
            <div class="preview hidden" id="preview-hidden"></div>
        </div>
        <div class="preview-area">
            <input type="hidden" id="x" name="x" />
            <input type="hidden" id="y" name="y" />
            <input type="hidden" id="w" name="w" />
            <input type="hidden" id="h" name="h" />
            <input type="hidden" id='img_src' name='src'/>
            <div class="tcrop">头像预览</div>
            <div class="crop crop100">
                <img id="crop-preview-100" src="/Public/Intesys/AdminX/images/sample.png" width="140" height="140" alt="">
            </div>
            <div class="crop crop60">
                <img id="crop-preview-60" src="/Public/Intesys/AdminX/images/sample.png" alt="" width="80" height="80">
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</form>